<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>todoList</title>
</head>

<body>
    <div></div>
    <div id="app">
        <curry @manba="handlerIpt" :list="list" v-model="ipt">
            <template v-slot>
            <div>
            <h2>已完成的事情</h2>
            <div v-for="item in finishlist">
                <input type="checkbox" checked @click.prevent="handlerCheck(item)"> {{item.contents}}
                <button @click="del(item)">删除</button>
            </div>
            </div>
            </template>
        </curry>
    </div>

    <script src="./vue.js"></script>
    <script>
        let curry = {
            template: `
		<div>
			 <input type="text" v-model="ipt" @keyup.enter="handlerIpt">
			 <h2>未完成的事情</h2>
			 <div v-for="item in unfinishlist">
			 <input type="checkbox" @click.prevent="handlerCheck(item)"> {{item.contents}}
			 <button @click="del(item)">删除</button>
			 </div>
             <slot></slot>
		</div>
            `,
            props: {
                list: Array
            },
            data() {
                return {
                    ipt: '',
                }
            },
            methods: {
                handlerIpt() {
                    this.$emit("manba", this.ipt)
                    this.ipt = ''
                },
                handlerCheck(item) {
                    this.list[item.id].isChecked = !item.isChecked
                },
                del(item) {
                    this.list.splice(item.id, 1);
                    //因为删除之后，id是不会动态的变化
                    //重新排序，给id动态赋值，为了后续删除
                    this.list.forEach((ele, index) => {
                        ele.id = index
                    });
                }
            },
            computed: {
                unfinishlist() {
                    return this.list.filter(ele => ele.isChecked === false)
                },
            }
        }


        let vm = new Vue({
            el: '#app',
            components: {
                curry
            },
            data: {
                ipt: '',
                list: [{
                    id: 0,
                    contents: '吃饭',
                    isChecked: false
                }, ]
            },
            computed: {
                finishlist() {
                    return this.list.filter(ele => ele.isChecked === true)
                }
            },
            methods: {
                handlerIpt(data) {
                    this.ipt = data
                    this.list.push({
                        id: this.list.length,
                        contents: this.ipt,
                        isChecked: false
                    })
                },
                handlerCheck(item) {
                    this.list[item.id].isChecked = !item.isChecked
                },
                del(item) {
                    this.list.splice(item.id, 1);
                    //因为删除之后，id是不会动态的变化
                    //重新排序，给id动态赋值，为了后续删除
                    this.list.forEach((ele, index) => {
                        ele.id = index
                    });
                }
            }
        })
    </script>
</body>

</html>